import React, { Component } from 'react';

class FormDemo extends Component {
  constructor (props) {
    super(props);
    this.state = {
      inputValue: '',
      textareaValue: '',
      radioValue: '',
      checkBoxValue: [],
      selectValue: '',
      multipleSelectValue: []
    };
  }
  handleInputChange (e) {
    console.log(e.target.value);
    this.setState({
      inputValue: e.target.value
    });
  }
  handleTextareaChange (e) {
    this.setState({
      textareaValue: e.target.value
    });
  }
  handleRadioChange (e) {
    console.log(e.target.value);
    this.setState({radioValue: e.target.value})
  }
  async handleCheckBoxChange (e) {
    let {checked, value} = e.target;
    let {checkBoxValue} = this.state;
    if (checked && checkBoxValue.indexOf(value) === -1) {
      checkBoxValue.push(value);
    } else {
      checkBoxValue = checkBoxValue.filter(item => item !== value);
    }
    await this.setState({checkBoxValue});
    console.log(this.state.checkBoxValue);
  }
  handleSelectChange (e) {
    console.log(e.target.value);
    this.setState({selectValue: e.target.value});
  }
  handleMultipleChange (e) {
    // let {multipleSelectValue} = this.state;
    let {value, options} = e.target;
    console.log(value, options);
    // const multipleSelectValue = Object.keys(options)
    //   .filter(i => options[i].selected === true)
    //   .map(i => options[i].value);
    // console.log(multipleSelectValue);
    // this.setState({multipleSelectValue});
  }
  render() {
    const {inputValue, textareaValue, radioValue, checkBoxValue, selectValue, multipleSelectValue} = this.state;
    return (
      <div>
        <h3>表单demo</h3>
        <div>
          <p>
            单行输入框：
            <input type="text" value={inputValue} onChange={this.handleInputChange.bind(this)}/>
          </p>
          <div>{inputValue}</div>
          <p>
            多行输入框:
            <textarea value={textareaValue} onChange={this.handleTextareaChange.bind(this)}></textarea>
          </p>
          <div>{textareaValue}</div>
          <p>
            单选框：
            <input type="radio" value="1" checked={radioValue === '1'} onChange={this.handleRadioChange.bind(this)}/>1
            <input type="radio" value="2" checked={radioValue === '2'} onChange={this.handleRadioChange.bind(this)}/>2
          </p>
        </div>
        <div>
          <p>复选框</p>
          <label>
            <input type="checkBox" value="apple" checked={checkBoxValue.indexOf('apple') !== -1} onChange={this.handleCheckBoxChange.bind(this)}/> apple
          </label>
          <label>
            <input type="checkBox" value="banana" onChange={this.handleCheckBoxChange.bind(this)}/> banana
          </label>
          <label>
            <input type="checkBox" value="pear" onChange={this.handleCheckBoxChange.bind(this)}/> pear
          </label>
        </div>
        <div>
          <p>Select</p>
          <select value={selectValue} onChange={this.handleSelectChange.bind(this)}>
            <option value="apple">apple</option>
            <option value="banner">banner</option>
            <option value="pear">pear</option>
          </select>
          <p>multipleSelect 多项select</p>
          <select value={multipleSelectValue} onChange={this.handleMultipleChange.bind(this)} multiple={true}>
            <option value="apple">apple</option>
            <option value="banna">banna</option>
            <option value="pear">pear</option>
            <option value="orange">orange</option>
          </select>
        </div>
      </div>
    );
  }

}

export default FormDemo;
